<template>
  <div>
    <span class="left">
      <input
        type="checkbox"
        @change="allcheck"
        :checked="doneLength === allLength && allLength > 0"
      />
      已完成{{ doneLength }}/全部{{ allLength }}
    </span>
    <button class="right" @click="alldelete" v-del="true">清除已完成</button>
  </div>
</template>

<script>
export default {
  name: "todo-footer",
  data() {
    return {
      todoList: JSON.parse(localStorage.getItem("todos")),
    };
  },
  methods: {
    //全选按钮
    allcheck(event) {
      this.$bus.$emit("allCheck", event.target.checked);
    },
    //删除已完成
    alldelete() {
      this.$bus.$emit("deleteDone");
    },
  },
  computed: {
    doneLength() {
      return this.todoList.filter((item) => item.done).length;
    },
    allLength() {
      return this.todoList.length;
    },
  },
  mounted() {
    this.$bus.$on("todoList", (value) => {
      this.todoList = value;
    });
  },
};
</script>

<style scoped>
.left {
  float: left;
}
.right {
  float: right;
}
div {
  overflow: hidden;
  margin-top: 10px;
}
</style>